<template>
	<view class="mord">
		<view class="ao" v-for='l in data' :key="l.id">
			<view class="top">
				<img :src="l.DefaultImage" alt="">
				<p>{{l.cProductName}}</p>
			</view>
			<view class="stars">
				<p>商品评价</p>
				<view class="uni-padding-wrap uni-common-mt star">
					<view class="uni-flex uni-row">
						<view :class="{starActive:item}" @click="choise(l,item,index)" class="flex-item iconfont"
							v-for="(item,index) in l.clicked_list">
							<view v-if="item" class="starIcon">
								&#xe601;
							</view>
							<view v-else class="starIcon">
								&#xe602;
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="stars">
				<p>物流服务</p>
				<view class="uni-padding-wrap uni-common-mt star">
					<view class="uni-flex uni-row">
						<view :class="{starActive:item}" @click="choiseb(l,item,index)" class="flex-item iconfont"
							v-for="(item,index) in l.clicked_listb">
							<view v-if="item" class="starIcon">
								&#xe601;
							</view>
							<view v-else class="starIcon">
								&#xe602;
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="stars">
				<p>服务态度</p>
				<view class="uni-padding-wrap uni-common-mt star">
					<view class="uni-flex uni-row">
						<view :class="{starActive:item}" @click="choisec(l,item,index)" class="flex-item iconfont"
							v-for="(item,index) in l.clicked_listc">
							<view v-if="item" class="starIcon">
								&#xe601;
							</view>
							<view v-else class="starIcon">
								&#xe602;
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="text">
				<h1>输入评论</h1>
				<textarea v-model="l.cComment" placeholder="多行输入多行输入多行输入" />
			</view>
			<view class="text">
				<h1>上传图片</h1>
				<view class="imgbox">
					<view class="box">
						<image v-for='img in l.imgbox' :src="img" alt="" mode="aspectFit" />
						<view class="add" @click='upload(l.imgbox)' v-if="l.imgbox.length<6">
							<image src="../../static/img/1/jia.png" alt="" mode="aspectFit">
						</view>
					</view>

				</view>
			</view>
			<view class="text">
				<checkbox-group @change="che(l,l.isAnonymous)">
					<label>
						<checkbox :checked="l.isAnonymous" /><text>匿名评价</text>
					</label>
				</checkbox-group>
			</view>

		</view>
		<view class="sub" @click='sub'>
			提交评价
		</view>
	</view>
</template>

<script>
	import {
		USERPATH,
		ROOTPATH
	} from "../../common/config.js"
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				data: [],
				
				imgbox: [],
				cons: {
					isMember: true,
					models: [

					]
				},
				iShopId: '',
				cOrderNo: ''
			}
		},
		onLoad(options) {
			var that = this;
			this.cOrderNo = options.cOrderNo;
			this.iShopId = options.iShopId;
			this.getData()

		},
		methods: {
			getData() {

				let data = {
					iShopId: this.iShopId,
					cOrderNo: this.cOrderNo
				}
				this.$Request.post(
					this.$api.httpApi.user.oderPay + '&token=' + this.$SysCache.get('token'), data

				).then(res => {
					if (res.code == 200) {
						
						res.data.oOrderDetails.forEach(item => {
							let da = {
								iOrderDetail_Id: item.id,
								cComment: "",
								commentPics: "",
								imgbox:[],
								iOrder_Id: res.data.id,
								iProductSKU_Id: item.iSKUId,
								iProduct_Id: item.iProductId,
								iStars: 0,
								iType: 20,
								isAnonymous: false,
								Anonymous: 0,
								logisticStars: 0,
								serviceStars: 0,
								clicked_list: [false, false, false, false, false], //对应星星个数
								clicked_listc: [false, false, false, false, false], //对应星星个数
								clicked_listb: [false, false, false, false, false], //对应星星个数
							}
							// this.$set(item,"models",da)
							// this.cons.models.push(da)
							let temp = { ...item, ...da }
							this.data.push(temp)
							console.log(item)
							
						})
						

					}
				});
			},
			sub() {
				var that = this;
				let sendData = {
					isMember: true,
					models: []
				}
				this.data.forEach(item=>{
					item.commentPics = item.imgbox.join(";")
				})
				this.data.forEach(item=>{
					let da = {
						iOrderDetail_Id: item.iOrderDetail_Id,
						cComment: item.cComment,
						commentPics: item.commentPics,
						iOrder_Id: item.iOrder_Id,
						iProductSKU_Id: item.iProductSKU_Id,
						iProduct_Id: item.iProduct_Id,
						iStars: item.iStars,
						iType: item.iType,
						isAnonymous: item.isAnonymous,
						logisticStars: item.logisticStars,
						serviceStars: item.serviceStars
					}
					sendData.models.push(da)
				})
				that.$Request.post(
					that.$api.httpApi.user.saveBatch + '&token=' + that.$SysCache.get('token'),
					sendData
				).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '评价成功！'
						})
						uni.navigateBack({
							delta: 1
						})
					}
				});
			},
			che(item,isAnonymous) {
				
				this.$set(item,"isAnonymous",!item.isAnonymous)
				console.log(isAnonymous)
			},
			upload(item) {
				var that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(chooseImageRes);
						uni.uploadFile({
							url: ROOTPATH + that.$api.httpApi.user.upload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							folderName: tempFilePaths[0].name,
							success: (uploadFileRes) => {
								var js = JSON.parse(uploadFileRes.data)
								console.log(js);
								if (js.code == 200) {
									if (item.length < 6) {
										item.push(js.data.imgurl)
									}

								}
							}
						});
					}
				});
			},
			// upload : function(){
			//    var _self = this;
			//    uni.chooseImage({
			//     count: 10,
			//     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			//     sourceType: ['album'], //从相册选择
			//     success: function (res) {
			//      const tempFilePaths = res.tempFilePaths;
			//      const uploadTask = uni.uploadFile({
			//       url : '/dpc/client/FileUpload/uploadWx',
			//       filePath: tempFilePaths[0],
			//       name: 'file',
			//       success: function (uploadFileRes) {
			//        console.log(uploadFileRes);
			//       }
			//      });

			//     },
			//     error : function(e){
			//      console.log(e);
			//     }
			//    });
			//   },
			//starIcon
			starIcon(item) {
				if (item) {
					return '&#xe601;'
				} else {
					return '&#xe602;'
				}
			},
			//点击选择
			choise(l,item,index) {
				let num = 0
				console.log(item)
				l.clicked_list.forEach((str,indu)=>{
					this.$set(l.clicked_list,indu,false)
					if(indu <= index){
						this.$set(l.clicked_list,indu,true)
					}
					
					
				})
				l.clicked_list.forEach(dd=>{
					if(dd){
						num++
					}
				})
				console.log(num)
				this.$set(l,"iStars",num)
			},
			//点击选择
			choiseb(l,item,index) {
				let num = 0
				l.clicked_listb.forEach((str,indu)=>{
					this.$set(l.clicked_listb,indu,false)
					if(indu <= index){
						this.$set(l.clicked_listb,indu,true)
					}
					
					
				})
				l.clicked_listb.forEach(dd=>{
					if(dd){
						num++
					}
				})
				console.log(num)
				this.$set(l,"logisticStars",num)
			},
			//点击选择
			choisec(l,item,index) {
				let num = 0
				l.clicked_listc.forEach((str,indu)=>{
					this.$set(l.clicked_listc,indu,false)
					if(indu <= index){
						this.$set(l.clicked_listc,indu,true)
					}
					
					
				})
				l.clicked_listc.forEach(dd=>{
					if(dd){
						num++
					}
				})
				console.log(num)
				this.$set(l,"serviceStars",num)
			}
		},



	}
</script>

<style scoped>
	/* uni-checkbox-group{ width: 100% !important; } */
	uni-checkbox-group uni-label {
		width: 33% !important;
		margin-bottom: 20rpx;
		vertical-align: middle;
	}

	/*checkbox 选项框大小  */
	uni-checkbox .uni-checkbox-input {
		width: 30rpx !important;
		height: 30rpx !important;
	}

	/*checkbox选中后样式  */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #4DC897;
		border-color: #4DC897;
	}

	/*checkbox选中后图标样式  */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		width: 20rpx;
		height: 20rpx;
		line-height: 20rpx;
		text-align: center;
		font-size: 18rpx;
		color: #fff;
		background: transparent;
		// transform: translate(-70%, -50%) scale(1);
		// -webkit-transform: translate(-70%, -50%) scale(1);
	}

	.sub {
		display: block;
		width: 90%;
		height: 94rpx;
		background: rgba(77, 200, 151, 1);
		border-radius: 47rpx;
		margin: auto;
		text-align: center;
		line-height: 94rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}

	.imgbox {
		margin-top: 40rpx;
	}

	.imgbox .add {
		width: 188rpx;
		height: 188rpx;
		display: inline-block;
		vertical-align: middle;
		margin-top: 25rpx;
	}

	.imgbox .box {
		display: inline-block;
		vertical-align: middle;
	}

	.imgbox .box image {
		display: inline-block;
		vertical-align: middle;
		width: 188rpx;
		height: 188rpx;
		margin-right: 35rpx;
		margin-top: 25rpx;
		/* border: 1upx solid #eee; */
	}

	.imgbox .add image {
		display: inline-block;
		vertical-align: middle;
		width: 188rpx;
		margin-top: 0;
		height: 188rpx;
	}

	.text {
		margin-top: 50rpx;
	}

	.text text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(133, 133, 133, 1);
		margin-left: 15rpx;
	}

	.text textarea {
		/* width: 100%; */
		height: 270rpx;
		border: 1px solid rgba(229, 229, 229, 1);
		border-radius: 10rpx;
		margin-top: 25rpx;
		padding: 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(149, 149, 149, 1);
	}

	.text h1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(29, 29, 29, 1);
		padding-left: 25rpx;
	}

	.stars {
		margin-bottom: 43rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(36, 36, 36, 1);

	}

	.stars p {
		display: inline-block;
		vertical-align: middle;
		margin-right: 30rpx;
	}

	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot');
		src: url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.woff') format('woff'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_1254062_cqoky071dbi.svg#font_family') format('svg');
	}

	.iconfont {
		//与上方font-family 保持一致
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
	}

	.star.uni-common-mt {
		box-sizing: border-box;
		/* width: 100%; */
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		/* padding: 0 50rpx; */


	}

	.flex-item {
		display: inline-block;
		width: 60rpx;
		color: #999;

	}

	.starIcon {
		font-size: 40rpx;
	}

	.starActive {
		color: #ff8000;
	}

	.mord {
		height: 100%;
		overflow: auto;
		background: #fff;
	}

	.ao {
		width: 90%;
		margin: auto;
	}

	.top {
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		margin-bottom: 50rpx;
	}

	.top img {
		display: inline-block;
		vertical-align: top;
		width: 144rpx;
		height: 144rpx;
	}

	.top p {
		margin-left: 34rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		display: inline-block;
		vertical-align: top;
	}
</style>
